<template>
  <div class="home">
    <a-tabs v-model:activeKey="activeKey" @change="handleChangeTab">
      <a-tab-pane key="1" tab="敏感数据清单"></a-tab-pane>
      <a-tab-pane key="2" tab="敏感表"></a-tab-pane>
      <a-tab-pane key="3" tab="敏感字段"></a-tab-pane>
      <template #rightExtra>
        <a-button
          @click="showDiscoveryStrategy"
          style="margin-right: 10px"
          type="primary"
          >发现策略</a-button
        >
        <a-button @click="onExport">导出</a-button>
      </template>
    </a-tabs>
    <a-table :columns="columns" :data-source="dataSource" bordered>
      <template v-for="col in ['name']" #[col]="{ text, record }" :key="col">
        <div>
          <template v-if="editableData[record.key]">
            <a-select
              ref="select"
              v-model:value="editableData[record.key][col]"
              style="width: 100%"
            >
              <a-select-option
                :key="index"
                v-for="(options, index) in editableData[record.key]['options']"
                :value="options.value"
                >{{ options.name }}</a-select-option
              >
            </a-select>
          </template>

          <template v-else>
            <a-input disabled :value="text"></a-input>
            <!-- {{ text }} -->
          </template>
        </div>
      </template>
      <template #operation="{ record }">
        <div class="editable-row-operations">
          <span v-if="editableData[record.key]">
            <a @click="save(record.key)">保存</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定取消吗?" @confirm="cancel(record.key)">
              <a>取消</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a @click="edit(record.key)">编辑</a>
          </span>
        </div>
      </template>
    </a-table>
  </div>
  <DiscoveryStrategy @onChange="handleChange" ref="DiscoveryStrategy" />
</template>

<script>
import { cloneDeep } from 'lodash-es';
import { reactive, toRefs, getCurrentInstance } from 'vue';
import DiscoveryStrategy from '@/views/Home/components/DiscoveryStrategy';
const columns = [
  {
    title: '序号',
    width: 100,
    customRender: ({ text, record, index }) => {
      return `${index + 1}`;
    },
    align: 'center',
  },
  {
    title: '表',
    dataIndex: 'surface',
  },
  {
    title: '字段',
    dataIndex: 'field',
  },
  {
    title: '数据类型',
    dataIndex: 'typeOfData',
  },
  {
    title: '数据样本',
    dataIndex: 'dataSample',
  },
  {
    title: '数据类别',
    width: 200,
    dataIndex: 'name',
    slots: { customRender: 'name' },
  },
  {
    title: '安全级别',
    dataIndex: 'securityLevel',
  },

  {
    title: '操作',
    width: 120,
    dataIndex: 'operation',
    slots: { customRender: 'operation' },
  },
];

const mockData = () => {
  const data = [];
  for (let i = 0; i < 100; i++) {
    data.push({
      key: i.toString(),
      name: `信用代码信息`,
      surface: `${Math.random().toFixed(3)}PRO-ACL${Math.random().toFixed(3)}`,
      field: `name${Math.random().toFixed(3)}`,
      typeOfData: `VARCHAR2${Math.random().toFixed(3)}`,
      dataSample: `仓央嘉措${Math.random().toFixed(3)}`,
      securityLevel: `${Math.random().toFixed(1)}级`,

      options: [
        {
          value: '信用代码信息',
          name: '信用代码信息',
        },
        {
          value: '个人基本信息',
          name: '个人基本信息',
        },
      ],
    });
  }
  return data;
};
export default {
  name: 'Home',
  components: { DiscoveryStrategy },
  setup() {
    const state = reactive({
      activeKey: '1',
      dataSource: mockData(),
      editableData: {},
      editingKey: '',
      DiscoveryStrategy: null,
    });
    const { proxy } = getCurrentInstance();
    const edit = (key) => {
      state.editableData[key] = cloneDeep(
        state.dataSource.filter((item) => key === item.key)[0]
      );
    };
    const save = (key) => {
      Object.assign(
        state.dataSource.filter((item) => key === item.key)[0],
        state.editableData[key]
      );
      delete state.editableData[key];
      proxy.$message.success('操作成功');
    };
    const cancel = (key) => {
      delete state.editableData[key];
    };
    // tab change
    const handleChangeTab = () => {
      state.dataSource = mockData();
    };
    // 发现策略
    const showDiscoveryStrategy = () => {
      state.DiscoveryStrategy.open();
    };
    const onExport = () => {
      proxy.$message.success('导出');
    };
    const handleChange = () => {
      state.dataSource = mockData();
    };
    return {
      ...toRefs(state),
      columns,
      edit,
      save,
      cancel,
      handleChangeTab,
      handleChange,
      showDiscoveryStrategy,
      onExport,
    };
  },
};
</script>
